<template>
<div class="card">
  <div class="card-content">
    <nav class="navbar" role="navigation" aria-label="main navigation">
      <div class="navbar-brand">
        <router-link class="navbar-item" to="/">
          <svg xmlns="http://www.w3.org/2000/svg" width="120px" viewBox="0 0 365.79 100.8">
            <path
              d="M202.31,44.93a32.79,32.79,0,0,1,7.33-2.47c13.11-2.49,26.17,3.67,30,19.43a38.39,38.39,0,0,1,1,9V93.62c0,2.54-.9,3.42-3.47,3.42H224c-2,0-2.93-.94-2.93-2.94V69.93a11.8,11.8,0,0,0-1.41-5.73c-2.82-5.2-10.11-6.61-14.39-2.73-2.43,2.2-3,5.19-3,8.3v24c0,2.65-.59,3.23-3.23,3.23H185.53c-2.47,0-3.36-.9-3.36-3.4V6.32c0-2.44.88-3.32,3.29-3.32h13.66c2.26,0,3.18.91,3.18,3.18V44.93Z"
              style="fill:#2b2b2b" />
            <path
              d="M150.1,41.78c5.72.09,11.28.9,16.48,3.46a10.38,10.38,0,0,1,1.54.91c1.47,1.06,1.68,2.07.81,3.67-1.41,2.59-2.81,5.18-4.22,7.76-1.07,2-2,2.29-4.08,1.39a29,29,0,0,0-10-2.73,10.26,10.26,0,0,0-1.92,0,1.82,1.82,0,0,0-1.66,1.18,1.94,1.94,0,0,0,.54,2,7.48,7.48,0,0,0,2.79,1.81c2.88,1.16,5.82,2.19,8.66,3.42,3.66,1.58,7.08,3.55,9.51,6.84,6,8.16,2.77,19.81-6.76,24.21a31.34,31.34,0,0,1-13.65,2.52,41.44,41.44,0,0,1-13.07-2.06,15.57,15.57,0,0,1-4.68-2.34c-1.39-1.09-1.54-1.82-.75-3.4L133.91,82c.84-1.64,2-2,3.65-1.15A28.33,28.33,0,0,0,148.39,84c1.73.09,2.68-.4,3.08-1.49a3,3,0,0,0-1.26-3.35A20.41,20.41,0,0,0,144,76.09c-3.9-1.39-7.62-3.13-10.52-6.18-8.79-9.27-4.8-23.52,7.55-27A31.92,31.92,0,0,1,150.1,41.78Z"
              style="fill:#2b2b2b" />
            <path
              d="M57,2.86H43.36c-2.67,0-3.49.82-3.49,3.5V44.22a28.2,28.2,0,0,0-16-2.08c-6.75,1.06-12.4,4-16.55,9.56A28.12,28.12,0,0,0,2,67.17c-.6,9.6,2.17,18,9.33,24.47,8.85,8.06,23.16,9,32.54.88a34.63,34.63,0,0,0,2.65-2.9c.45,1.2.7,2,1.06,2.84s.65,1.65,1,2.44a3,3,0,0,0,3.11,2c1.71-.06,3.43,0,5.15,0C59,96.9,60,96,60,93.79V5.86C60,3.8,59,2.86,57,2.86ZM42,70A10.65,10.65,0,0,1,31.57,80.87H31.2a10.87,10.87,0,0,1,.21-21.73A10.53,10.53,0,0,1,42,69.6C42,69.74,42,69.87,42,70Z"
              style="fill:#2b2b2b" />
            <path
              d="M118.22,58.8C117.07,49.85,113,44,103.07,42.37a58.39,58.39,0,0,0-15.4-.09c-3.11.35-6.11.74-9.11,1.35-2.22.46-3,1.6-2.76,3.84.14,1.07.3,2.13.46,3.19.33,2.09.57,4.19,1,6.25.39,1.72,1.45,2.34,3,1.9a47.55,47.55,0,0,1,7-1.46c3.09-.41,6.17-.9,9.3-.35a4.66,4.66,0,0,1,4.13,3.73,10.79,10.79,0,0,1,.25,3.67,1.24,1.24,0,0,1-1-.34,25.61,25.61,0,0,0-15.53-.89c-6.78,1.78-11.49,6-13,12.78S71.26,89,76.75,93.77c5.1,4.45,11.19,5.15,17.59,4a21.48,21.48,0,0,0,10.77-5.63c.52-.47.76-.52,1.07.18.46,1,1,2,1.52,3a2.66,2.66,0,0,0,2.68,1.61h5c2.23,0,3.13-.89,3.13-3.09V65A49.56,49.56,0,0,0,118.22,58.8ZM94.12,85a5.74,5.74,0,0,1-5.7-5.78v-.09A5.74,5.74,0,1,1,94.12,85Z"
              style="fill:#2b2b2b" />
            <path d="M270.5,96.2V51h9v36.9h13.44V96.2Z" style="fill:#c7c7c7" />
            <path d="M296.84,54.87a5.35,5.35,0,0,1,10.68,0,5.35,5.35,0,0,1-10.68,0Zm1,41.33V66.86h8.7V96.2Z"
              style="fill:#c7c7c7" />
            <path d="M316,96.2V74.54H311.3V66.86H316V56.49h8.7V66.86h5.22v7.68h-5.22V96.2Z" style="fill:#c7c7c7" />
            <path
              d="M362,83.36H341c.3,4.32,2.58,7.14,6.6,7.14,2.82,0,4.74-1.32,6.36-4.2l7.62,2.52c-2.64,5.46-7.86,8.22-14.1,8.22-9.06,0-15.3-5.94-15.3-15.42s6.24-15.54,15-15.54C356.24,66.08,362,72,362,81.8Zm-8.82-5.7a5.5,5.5,0,0,0-5.88-5c-3.18,0-5.28,2-5.94,5Z"
              style="fill:#c7c7c7" />
          </svg>
        </router-link>

        <a role="button" class="navbar-burger burger" aria-label="menu" :aria-expanded="open" :class="{'is-active': open}" @click.prevent="open = !open">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>

      <div class="navbar-menu" :class="{ 'is-active': open }">
        <div class="navbar-end">
          <router-link class="navbar-item" @click.native="open = false" to="/" exact>
            Overview
          </router-link>
          <router-link class="navbar-item" @click.native="open = false" to="/statistics">
            Statistics
          </router-link>
        </div>
      </div>
    </nav>
  </div>
</div>
</template>

<script>
  export default {
    props: ['connected', 'stats'],

    data() {
      return {
        open: false,
      }
    },
  }
</script>
